import React, {useState} from 'react'
import {View} from '@tarojs/components'
import './Tabbar.scss'


export interface TabListItem {
  id: number
  title: string
}

interface Props extends TabbarProps{
  tabList: TabListItem[],
  onchange: (index: number) => void
}


export interface TabbarProps {
  curIndex: string | number
}

/**
 * 自定义tabbar hooks
 * @param id
 */
export const useTabbar = ({curIndex}: TabbarProps) => {
  const [curId, setCurId] = useState(curIndex)

  function onchange (index: number) {
    console.log(index)
    setCurId(index)
  }

  return {curId, onchange}
}


const Tabber: React.FC<Props> = React.memo(({tabList, curIndex, onchange}) => {
  return <View className='tabbar'>
    {
      tabList.map(tab => <View
        className={`tabbar_item ${curIndex === tab.id ? 'active' : ''}`}
        onClick={() => onchange(tab.id)}
        key={tab.id}
      >{tab.title}</View>)
    }
  </View>
})

export default Tabber
